<!-- yangbuyi Copyright (c) https://yby6.com 2023. -->

<template>
  <!-- 公共头 -->
  <header id="header">
    <section class="container">
      <div class="nav">
        <div class="t-menu__logo"><img src="https://qcloudimg.tencent-cloud.cn/raw/2371febaa8c9cd071f76c74587bcfbf1.svg"
                                       height="21" alt="logo"></div>

        <div class="nav-item">
          <div class="nav-item-menu">
            <router-link to="/" tag="li" active-class="current" exact>
              <div :class="
            {
              'nav-item-menu-div': true,
              'active': routeType === 1
            }" @click="activeRoute(1)">

                <span>
                  <svg id="text" class="ruyi-icon ruyi-icon-text" xmlns="http://www.w3.org/2000/svg" width="24"
                       height="24" viewBox="0 0 24 24" style="font-size: 24px;"><g fill="none"><rect x="8" y="17"
                                                                                                     width="8"
                                                                                                     height="2"
                                                                                                     fill="currentColor"></rect><rect
                    x="8" y="4" width="7" height="4" transform="rotate(90 8 4)" fill="currentColor"
                    fill-opacity="0.5"></rect><rect x="20" y="4" width="7" height="4" transform="rotate(90 20 4)"
                                                    fill="currentColor" fill-opacity="0.5"></rect><path
                    d="M20 4H4V8H10L10 18H14L14 8H20V4Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
                    fill-opacity="0.5"></path></g></svg>
                  文生图
                </span>
              </div>
            </router-link>
          </div>

          <div class="nav-item-menu">
            <router-link to="/imgToimg" tag="li" active-class="current" exact>
              <div :class="
            {
              'nav-item-menu-div': true,
              'active': routeType === 2
            }" @click="activeRoute(2)">
                <span>
                  <svg id="image" class="ruyi-icon ruyi-icon-image" xmlns="http://www.w3.org/2000/svg" width="24"
                       height="24" viewBox="0 0 24 24" style="font-size: 24px;"><g fill="none"><path
                    d="M5 4C4.44772 4 4 4.44772 4 5V15.3651C4.72021 12.8219 6.66069 11 8.94187 11C11.127 11 12.9995 12.672 13.7862 15.048C14.0169 15.7474 14.1489 16.4905 14.1771 17.2444C14.1491 16.4898 14.017 15.7461 13.7862 15.0462C14.4751 14.4101 15.3092 14.0676 16.1657 14.0691C17.0226 14.0692 17.8571 14.412 18.547 15.0474C19.2369 15.6828 19.746 16.5775 19.9999 17.6006V19.0118C20 19.0078 20 19.0039 20 19V5C20 4.44772 19.5523 4 19 4H5Z"
                    fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" fill-opacity="0.5"></path><path
                    d="M13 8.5C13 9.16304 13.2634 9.79893 13.7322 10.2678C14.2011 10.7366 14.837 11 15.5 11C16.163 11 16.7989 10.7366 17.2678 10.2678C17.7366 9.79893 18 9.16304 18 8.5C18 7.83696 17.7366 7.20107 17.2678 6.73223C16.7989 6.26339 16.163 6 15.5 6C14.837 6 14.2011 6.26339 13.7322 6.73223C13.2634 7.20107 13 7.83696 13 8.5Z"
                    fill="currentColor"></path><path
                    d="M13.757 20.1413H4.64C4.47026 20.1413 4.30748 20.057 4.18745 19.907C4.06743 19.757 4 19.5535 4 19.3413V15.3651C4.72021 12.8219 6.66069 11 8.94187 11C11.127 11 12.9995 12.672 13.7862 15.048C14.0169 15.7474 14.1489 16.4905 14.1771 17.2444C14.1491 16.4898 14.017 15.7461 13.7862 15.0462C14.4751 14.4101 15.3092 14.0676 16.1657 14.0691C17.0226 14.0692 17.8571 14.412 18.547 15.0474C19.2369 15.6828 19.746 16.5775 19.9999 17.6006V19.3395C19.9999 19.5517 19.9325 19.7552 19.8125 19.9052C19.6925 20.0552 19.5297 20.1395 19.3599 20.1395H13.7576C13.7574 20.1401 13.7572 20.1407 13.757 20.1413Z"
                    fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" fill-opacity="0.7"></path></g></svg>
                  图生图</span>
              </div>
            </router-link>
          </div>
        </div>

        <div class="toggleDarkBtn">
          <el-button style="text-align: right" color="#626aef" :dark="isDark" @click="toggleDarkBtn()">
            {{ toggleTitle }}
          </el-button>

          <el-button class="btn2" style="text-align: right" color="#626aef" @click="changeLanBtn()">{{
              lanTitle
            }}
          </el-button>
        </div>


      </div>
      <div class="clear"></div>
    </section>
  </header>
</template>
<script setup>
import {isDark, toggleDark} from "@/composables";

const {proxy} = getCurrentInstance();

let routeType = ref(1)


const activeRoute = (type) => {
  routeType.value = type
}


// 声明触发的事件
const emit = defineEmits(["changeLan"]);

let lanTitle = ref("中文");
let toggleTitle = ref("明亮");
const toggleDarkBtn = () => {
  toggleTitle = toggleDark() ? "明亮" : "暗色";
};
const changeLanBtn = () => {
  lanTitle.value = lanTitle.value === "中文" ? "English" : "中文";
  const lanVal = lanTitle.value !== "中文" ? "中文" : "English";
  const modalVal =
    lanTitle.value !== "中文"
      ? "切换全局组件为中文"
      : "Switch global components to English";
  proxy.$modal.msgSuccess(modalVal);
  // 带参数触发父组件函数
  emit("changeLan", lanVal);
};
// 初始化
changeLanBtn();
</script>
<style scoped lang="scss">
#header {
  background-color: #000000;
  box-sizing: border-box;
  flex-shrink: 0;
}

.container {
  padding: 0;
  background-color: #000000;
}

.nav {
  display: flex;
  height: 52px;

  .t-menu__logo {
    align-items: center;
    display: flex;
    height: 100%;
    margin-right: 20px;
    padding-left: 20px !important;
  }

  .nav-item {
    align-items: center;
    display: flex;
    flex: 1 1;

    color: rgba(0, 0, 0, .9);
    list-style: none;
    margin: 0;
    padding: 0;

    .nav-item-menu {
      position: relative;
    }

    .active {
      background-color: #0052d9;
    }

    .nav-item-menu .nav-item-menu-div {

      position: relative;
      --ripple-color: #e8e8e8;
      align-items: center;
      border-radius: 3px;
      color: #fff;
      cursor: pointer;
      display: flex;
      text-align: center;
      text-overflow: ellipsis;
      padding: 5px 16px;
      justify-content: center;
      box-sizing: content-box;
      transition: all .28s cubic-bezier(.645, .045, .355, 1);

      a {
        text-decoration: none;
        transition: all .28s cubic-bezier(.645, .045, .355, 1);
      }

      span {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 16px;
      }

    }

    .nav-item-menu .nav-item-menu-div:before {
      content: "";
      display: block;
      height: 20px;
      left: 0;
      position: absolute;
      right: 0;
    }

  }

}

.toggleDarkBtn {
  align-items: center;
  display: flex;
  line-height: 32px;
  overflow: hidden;
  position: relative;
  text-align: right;
  padding-right: 20px;
}

@media screen and (max-width: 500px) {
  .toggleDarkBtn {
    margin-top: 15px;
    /*width: 30%;*/
    margin-right: 20px;
  }

  .container {
    padding: 0;
  }

  .toggleDarkBtn {
    width: min-content;
    margin-top: -30px;

    .btn2 {
      margin-top: 10px;
    }
  }
}
</style>
